<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        .el-main{
            padding: 0px;
        }
        .el-tabs__header{
            margin:0px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{userInfo.ename}}</span>
        </el-header>

        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu >
                    <el-submenu v-for="p in permissionArr" :index="p.id">
                        <template slot="title"><i :class="p.icon"></i>{{p.pname}}</template>
                        <el-menu-item-group>
                            <el-menu-item  v-for="sp in p.subMenu"  :index="sp.id" @click="addTabs(sp)">{{sp.pname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-aside>


            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            key="asd"
                            label="欢迎页"
                            name="asd"
                    >
                        欢迎页
<!--                        <iframe src="http://www.douyu.com" style="border: none; width: 99%;height:805px"></iframe>-->
                    </el-tab-pane>
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.id"
                            :label="item.pname"
                            :name="item.id"
                    >
                        <iframe v-bind:src="item.url" style="border: none; width: 99%;height:805px"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    $.get("/ssm/emp/getInfo",function (backData){

        app.userInfo=backData.data.userInfo;
        console.log(backData);
        console.log(123);
        app.permissionArr=backData.data.permissionInfo
    })
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[],
            editableTabsValue:"asd",
            editableTabs:[],
            userInfo:{},
            permissionArr:[]
        },
        methods:{
            addTabs:function (data){
                // 检查要添加的 tab 是否已经存在
                if (this.editableTabs.indexOf(data)<0) {
                    this.editableTabs.push(data);
                }
                this.editableTabsValue = data.id;
            },
            removeTab:function (targetName){
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.id;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.id !== targetName);

            }
        }
    })
</script>
</body>
</html>